<template>
    <view class="py-outer-content">
        <view class="py-list-content">
            <u-tabs :list="tabsList" @click="handleTabsClick"></u-tabs>
        </view>
        <!-- 表单信息 -->
        <view class="py-list-content py-flow-content" v-if="formShow"
            :style="{height: windowHeight ? 'calc('+ windowHeight + ' - 10rpx - 10rpx - 44px - 5px)' : ''}">
            <view class="py-content" style="margin-bottom: 10rpx;">
                <!-- #ifdef H5 -->
                <component :is="currentComponent" ref="currentComponent" :formData="componentForm" readOnly></component>
                <!-- #endif -->

                <!-- #ifdef MP-WEIXIN || APP-PLUS -->
                <!-- 使用APP需要在main.js进行配置，配置位置有注释标注 -->
                <!-- 由于微信不支持动态组件，需要在pages.json中两处进行配置，配置位置有注释标注 -->
                <!-- 新增组件，只需要修改组件名称和最后条件判断中实际路径即可，并且将v-if替换成v-else-if -->
                <!-- ref、formData和readOnly的内容均不能修改 -->
                <!-- 条件判断中要写详细文件路径，包含前缀@和后缀.vue -->
                <!-- v-if="'@/pages/py/test.vue' == currentComponentPath" -->
                <test ref="currentComponent" v-if="'@/pages/py/test.vue' == currentComponentPath"
                    :formData="componentForm" readOnly></test>
                <!-- #endif -->

            </view>

        </view>

        <!-- 流转记录 -->
        <view class="py-list-content py-flow-content" v-else-if="flowRecordShow"
            :style="{height: windowHeight ? 'calc('+ windowHeight + ' - 10rpx - 10rpx - 44px - 5px)' : ''}">
            <view class="py-content">
                <!-- 非初始节点 -->
                <view v-for="(item, index) in flowRecordList" :key="index">
                    <py-flow-record-item :flow="item" fillNode :firstAssigneeName="lastFlowRecord.assigneeName"
                        :firstDeptName="lastFlowRecord.deptName"
                        v-if="item.taskDefKey == lastFlowRecord.taskDefKey"></py-flow-record-item>
                    <py-flow-record-item :flow="item" v-else></py-flow-record-item>
                </view>
                <!-- 初始节点设置 -->
                <py-flow-record-item :flow="lastFlowRecord" start></py-flow-record-item>
            </view>
        </view>


        <!-- 流程图 -->
        <view class="py-flow-content" v-else-if="flowableShow"
            :style="{height: windowHeight ? 'calc('+ windowHeight + ' - 10rpx - 44px - 5px)' : ''}">
            <py-bpmn-viewer :flowData="flowData"></py-bpmn-viewer>
        </view>



    </view>

</template>
<script>
    import { flowRecord } from "@/api/flowable/finished";
    import { getFormVariableList } from "@/api/flowable/flowableFormVariable";
    import {
        getFlowableFormByDeployId
    } from "@/api/flowable/flowableForm";
    import {
        flowXmlAndNode
    } from "@/api/flowable/definition";
    import {
        getWindowHeight,
        getFormData
    } from "@/utils/py";
    export default {
        data() {
            return {
                // 标签列表信息
                tabsList: [
                    {
                        name: "表单信息"
                    },
                    {
                        name: "流转记录"
                    },
                    {
                        name: "流程图"
                    }
                ],
                // 是否展示表单信息
                formShow: true,
                // 是否展示流转记录
                flowRecordShow: false,
                // 是否展示流程图
                flowableShow: false,

                // 模型xml数据
                flowData: {},
                // 查询参数
                queryParams: {
                    deptId: undefined
                },
                deployId: "", // 流程定义编号
                procInsId: "", // 流程实例编号
                taskId: "", // 任务编号

                flowRecordList: [], // 流程流转数据

                // 最后一个流程记录，也就是流程开始节点信息
                lastFlowRecord: undefined,

                // 当前组件
                // #ifdef APP-PLUS || H5
                currentComponent: undefined,
                // #endif

                // #ifdef APP-PLUS
                // App组件路径
                currentAppComponentPath: "",
                // #endif

                // 表单Id
                formId: undefined,

                // 是否启动流程
                hasStart: false,

                // 窗口高度（去掉导航栏）
                windowHeight: undefined,

                // 当前组件路径
                // #ifdef MP-WEIXIN || APP-PLUS
                currentComponentPath: "",
                // #endif

                // 是否启动流程
                hasStart: false,

                // 组件表单
                componentForm: undefined,

            }
        },
        onLoad: function (options) {
            if (options) {
                this.deployId = options.deployId;
                this.procInsId = options.procInsId;
                this.taskId = options.taskId;
            }

            // 获取获取表单变量信息
            this.getFormVariable(this.procInsId).then(() => {
                // 获取流程表单信息并且导入
                this.getFormPathAndImport(this.deployId);
            });

            // 获取流转记录
            this.getFlowRecordList(this.procInsId, this.deployId);

            // 获取窗口高度
            this.getWindowHeight();


        },
        methods: {

            // 获取窗口高度
            getWindowHeight() {
                getWindowHeight().then(response => {
                    this.windowHeight = response;
                })
            },

            /** 流程流转记录 */
            getFlowRecordList(procInsId, deployId) {
                const params = {
                    procInsId: procInsId,
                    deployId: deployId
                };
                flowRecord(params).then(response => {
                    let flowRecordList = response.data.flowList;
                    this.lastFlowRecord = flowRecordList.splice(flowRecordList.length - 1, 1)[0];
                    this.flowRecordList = flowRecordList;
                })
            },

            // 处理标签点击操作
            handleTabsClick(item) {
                let index = item && item.index;
                switch (index) {
                    case 0:
                        this.flowRecordShow = false;
                        this.flowableShow = false;
                        this.formShow = true;
                        break;
                    case 1:
                        this.flowableShow = false;
                        this.formShow = false;
                        this.flowRecordShow = true;
                        break;
                    case 2:
                        // 获取流程图xml
                        this.getFlowableXml();
                        break;
                }
            },

            // 获取表单变量信息
            getFormVariable(procInsId) {
                return new Promise((resolve, reject) => {
                    this.$modal.loading("正在获取数据...")
                    getFormVariableList({ procInsId }).then(response => {
                        let data = response.data;
                        let formData = getFormData(data);

                        this.componentForm = formData;
                        this.$modal.closeLoading();
                        resolve();
                    })
                })

            },

            // 获取流程图Xml
            getFlowableXml() {

                flowXmlAndNode({
                    procInsId: this.procInsId, deployId: this.deployId
                }).then(res => {
                    this.formShow = false;
                    this.flowRecordShow = false;
                    this.flowableShow = true;
                    this.flowData = res.data;
                })
            },

            // 导入组件
            importComponent(componentPath) {
                if (!componentPath) {
                    return;
                }
                let prefixIndex = componentPath.indexOf("@/");
                let suffixIndex = componentPath.lastIndexOf(".vue");
                if (prefixIndex == -1) {
                    prefixIndex = 0;
                } else {
                    prefixIndex = 2;
                }
                if (suffixIndex == -1) {
                    suffixIndex = componentPath.length;
                }

                let path = componentPath.substring(prefixIndex, suffixIndex);
                let appPath = path.replace("views/", "pages/");

                // #ifdef H5
                this.currentComponent = resolve => require([`@/${appPath}.vue`], resolve);
                // #endif

                // #ifdef MP-WEIXIN || APP-PLUS
                this.currentComponentPath = `@/${appPath}.vue`;
                // #endif

            },

            // 获取表单信息并且导入
            getFormPathAndImport(deployId) {
                getFlowableFormByDeployId(deployId).then(response => {
                    let data = response.data;
                    this.importComponent(data.formPath);
                })
            },





        },
    }
</script>

<style lang="css" scoped>
    .py-flow-content {
        overflow: auto;
    }
</style>